<template>
  <div>
    <el-drawer
        :model-value="visible"
        title="项目信息"
        size="500px"
        @close="closeHandle"
        @closed="closed"
    >
      <div class="demo-drawer__content">
        <el-form :model="form" ref="formRef" :rules="formRules" label-position="left">
          <el-form-item label="公司昵称" prop="name" required :label-width="formLabelWidth">
            <el-input v-model="form.name" placeholder="请输入项目名称" autocomplete="off"/>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-space>
          <el-button type="info" plain :loading="loading" @click="cancelHandle">取消</el-button>
          <el-button type="primary" :loading="loading" @click="confirmHandle">提交保存</el-button>
        </el-space>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import {ref, reactive, computed, watch} from "vue";
import {getUsers} from "@/api/user";
import {addProject, editProject} from "@/api/service.js";
import {STATUS_ENUM} from "@/views/project-list/status";
import {toast} from "@/hook/toast";
import {delay} from "@/utils";

const form = reactive({
  name: "",
  status: '',
  gongqi: "",
  qiandan_date: "",
  daoqi_date: "",
  yewu: '',
  chanpin: '',
  yaoqiu: '',
  beizhu: '',
  isEdit: false,
  id: '',
});
const formRules = computed(() => ({
  name: [
    {
      required: true,
      message: '请输入项目名称',
      trigger: 'change',
    }
  ],
  gongqi: [
    {
      required: true,
      message: '请输入工期',
      trigger: 'change',
    }
  ],
  yewu: [
    {
      required: true,
      message: '请选择业务员',
      trigger: 'blur'
    }
  ],
  status: [
    {
      required: true,
      message: '请选择项目状态',
      trigger: 'blur'
    }
  ],
  chanpin: [
    {
      required: true,
      message: '请选择业务员',
      trigger: 'blur'
    }
  ],
  qiandan_date: [
    {
      required: true,
      message: '请选择签单日期',
      trigger: 'blur'
    }
  ],
  daoqi_date: [
    {
      required: true,
      message: '请选择到期日期',
      trigger: 'blur'
    }
  ]
}))
const formRef = ref(null)
const loading = ref(false);
const size = ref("default");
const formLabelWidth = "80px";
const statusEnum = computed(() => STATUS_ENUM)
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  }
})
const emits = defineEmits(['update:modelValue', 'addSuccess'])

const cancelHandle = () => {
  visible.value = false
}

function closed() {
  resetForm()
}

const visible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emits('update:modelValue', value)
  }
})
const userList = ref([])

async function initUserList() {
  const resp = await getUsers()
  const {code, data, msg} = resp
  if (code !== 1) return
  if (!!data && data.length) {
    userList.value = data.map(item => {
      const {id, nickname} = item
      return {value: id, label: nickname}
    })
  }
}

function resetForm() {
  form.name = ''
  form.chanpin = ''
  form.yewu = ''
  form.status = ''
  form.beizhu = ''
  form.yaoqiu = ''
  form.qiandan_date = ''
  form.daoqi_date = ''
  form.gongqi = ''
  formRef.value.resetFields()
}

watch(() => props.modelValue, value => {
  if (!value) {
    return
  }
  initUserList()
})

const closeHandle = () => {
  visible.value = false
};

function editHandle(row) {
  const {
    chanpin_user,
    status,
    yewu_user,
    qiandan_date,
    daoqi_date,
    name,
    gongqi,
    content,
    jishu_yaoqiu_content,
    id
  } = row
  form.name = name
  form.chanpin = chanpin_user
  form.yewu = yewu_user
  form.status = status
  form.beizhu = content
  form.yaoqiu = jishu_yaoqiu_content
  form.qiandan_date = qiandan_date
  form.daoqi_date = daoqi_date
  form.gongqi = gongqi
  visible.value = true
  form.isEdit = true
  form.id = id
}

defineExpose({
  editHandle,
})


function reqMethod(data) {
  if (form.isEdit) return editProject(data)
  return addProject(data)
}

function confirmHandle() {
  formRef.value.validate(async flag => {
    if (!flag) return
    loading.value = true
    const {name} = form
    const payload = {
      name
    }
    if (form.isEdit) {
      payload.xiangmu_id = form.id
    }
    const resp = await addProject(payload)
	console.log(resp,'返回的数据');
	
    form.isEdit = false
    const {code, msg} = resp
    await delay(200)
    toast({title: msg})
    loading.value = false
    if (code !== 1) return
    triggerUpdate()
  })
}
// 通知组件是否重新刷新 和关闭组件
function triggerUpdate() {
  emits('addSuccess')
  resetForm()
  visible.value = false
}
</script>
